<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 上传头像
    const upload = document.querySelector('#upload')
    const avatar = document.querySelector('.figure img')
    const up     = document.querySelector('.btn-primary')
    // 昵称
    const nickname1 = document.querySelector('[name=nickname]')

    // 省市区
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')
    const form =document.querySelector('form')

    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939
  axios.defaults.baseURL='http://ajax-api.itheima.net'


  //保存数据
  form.addEventListener('submit',async function(e){
    e.preventDefault()
    const nb = await axios.put('/api/settings',{
      nickname:nickname1.value,
      province:province.value,
      city:city.value,
      area:area.value,
      avatar:avatar.src
  })
   })








async function init(){
  //=========省份显示==========
  const {data:res}=await axios.get('/api/province')
  console.log(res);
  const sf = res.data.map(
    (item,index) => `<option value="${item}">${item}</option>`
  ).join('')
  console.log(sf);
  province.innerHTML = '<option value="">省</option>'+sf

//==========市区显示================
const {data:{data:res2}} = await axios.get('/api/city',{
  params:{
    pname: '安徽省'
    }  
})
console.log(res2);
const ctry2 = res2.map((item,index)=> `<option value="${item}">${item}</option>`).join('')
city.innerHTML =  '<option value="">市</option>'+ctry2

//================区域显示===========

const {data:{data:res3}} =await axios.get('/api/area',{
  params:{
    pname: '安徽省',
    cname:'安庆市'
  }
})
const ququ = res3.map(
  (item,index)=> `<option value="${item}">${item}</option>`
).join('')
area.innerHTML = '<option value="">县区</option>'+ququ


}

// =============当省份改变时，城市的改变==============
province.addEventListener('change',async function(){
  const pp = province.value
  const {data:{data:citt}} = await axios.get('/api/city',{
  params:{
    pname:this.value,
    }  
})
console.log(citt);
const ctry2 = citt.map((item,index)=> `<option value="${item}">${item}</option>`).join('')
city.innerHTML =  ctry2
})

city.addEventListener('change',async function(){
  const {data:{data:po}} = await axios.get('/api/area',{
    params:{
      pname: province.value,
    cname:this.value
    }
  })
  console.log(po);
  const pl = po.map(
    (item,index)=> `<option value="${item}">${item}</option>`
  ).join('')
  area.innerHTML = pl
})




    // 功能列表
    // 功能1: 上传头像
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // 功能3: 省市区的联动效果
    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况

avatar.addEventListener('click',function(){
  upload.click()
})
upload.addEventListener('change',async function(){
  console.log('up');
  const file = this.files[0] 
  console.log(file);
  if (!file) {
        return
      }
      const fd = new FormData()
      fd.append('avatar', file)
      const { data: { data: { url } } } = await axios.post('/api/file', fd)
      console.log(url)
document.querySelector('.rounded').src=url
})


    init()
    
    // 要求： 
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能
    async function pcpc(){
  const {data:{data:pcu}} = await axios.get('/api/settings')
  console.log(pcu);
console.log(pcu.nickname);
  nickname1.value = `${pcu.nickname}`
  document.querySelector('[name=province]').innerHTML= `<option value="">${pcu.province}</option>`
  // document.querySelector('[name=city]').innerHTML=`<option value="">${pcu.city}</option>`
  // area.innerHTML=` <option value="">${pcu.area}</option>`
  document.querySelector('.rounded').src = `${pcu.avatar}`
}
   pcpc()
    


  </script>
</body>

</html>